<template>
  <div>
    <h1>Count</h1>
    <!-- 使用计算属性,让插值语法更方便阅读 -->
    <p>我的count值是{{ count }}</p>
    <!-- 直接使用插值语法拿到store中的getters中的值 -->
    <p>我的count的平方根的值是{{ countSqrt }}</p>
    <p>我的num值是{{ num }}</p>

    <button @click="increament">累加count的值</button>
    <button @click="increamentN({ n: 3 })">count的值加n</button>
    <button @click="increamentWait">等1s再加</button>
    <button @click="incrementNWait({ n: 3 })">等1s再加n</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Count",

  computed: {
    ...mapState(["count", "num"]),
    ...mapGetters(["countSqrt"])
  },
  methods: {
    ...mapMutations(["increament", "increamentN"]),
    ...mapActions(["increamentWait", "incrementNWait"]),
  },
};
</script>

<style scoped></style>
